<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 后台主题UI框架 - 空白页</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="__STATIC__/layout/favicon.ico">
    <link href="__STATIC__/layout/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__STATIC__/layout/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <!-- jqgrid-->
    <link href="__STATIC__/layout/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
    <link href="__STATIC__/layout/css/animate.css" rel="stylesheet">
    <link href="__STATIC__/layout/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="__STATIC__/layout/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
     <link href="__STATIC__/layout/css/gyq.css" rel="stylesheet">
      <link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">
    <link rel="stylesheet" href="__STATIC__/layout/css/zTreeStyle.css" type="text/css">
    <style>
        .col-md-4 label {
            width: 120px;
            margin-bottom: 0;
            display: inline-block;
            line-height: 40px;
            border-right: 1px solid #ccc;
            text-align: right;
            padding-right: 10px
        }

        .col-md-4 input {
            margin-left: 15px
        }

        .col-md-4:nth-of-type(2) {
            border: 1px solid #ccc;
            border-top: none;
            border-bottom: none;
        }

        #alertmod_table_list_2 {
            top: 900px !important;
        }

        select {
            width: 150px;
            height: 22px;
        }

        input[type="text"] {
            height: 22px;
            width: 150px
        }

     

        .alert_addNewZone {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.7);
        }

        .alert_addNewZone .alert_addNewZone_content {
            background: #f4f4f5;
            position: fixed;
            top: 50%;
            left: 50%;
            width: 700px;
            height: 450px;
            margin: -220px 0 0 -350px;
            padding: 5px;
            border: 4px solid #ccc /* margin 负值为宽高的一半 */
        }

        h3 {
            font-weight: normal;
            text-align: left;
            line-height: 24px;
            font-size: 16px;
            padding-left: 1%;
            width: 99%;
            margin-bottom: 30px;
            background: #a8c8e8
        }

        .alert_addNewZone .alert_addNewZone_content .alert_addNewZone_form {
            width: 100%;
        }

        .alert_addNewZone_tree {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgb(255, 255, 255, 0.7);
            z-index: 200
        }

        .alert_addNewZone_tree .alert_addNewZone_content_tree {
            background: #f4f4f5;
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 350px;
            margin: -175px 0 0 -250px;
            padding: 5px;
            border: 4px solid #ccc /* margin 负值为宽高的一半 */
        }

        /**/
        .alert_addNewZone .alert_addNewZone_content .alert_addNewZone_form {
            width: 100%;
        }

        .alert_addNewZone_tree .alert_addNewZone_content_tree .alert_addNewZone_form_tree {
            height: 230px;
            overflow-y: scroll;
        }

        .alert_addNewZone .alert_addNewZone_content .alert_addNewZone_form form {
            width: 100%;
        }

        .alert_addNewZone .alert_addNewZone_content .alert_addNewZone_form form .inputDiv {
            margin-bottom: 30px;
            width: 100%;
            font-size: 12px
        }

        .alert_addNewZone .alert_addNewZone_content .alert_addNewZone_form form .lastChild {
            margin-bottom: 10px;
            font-size: 12px
        }

        .alert_addNewZone .alert_addNewZone_content .alert_addNewZone_form form div label {
            display: inline-block;
            width: 130px;
            text-align: right;
            margin-left: 24%;
        }

        .alert_addNewZone .alert_addNewZone_content .alert_addNewZone_form form div.btn_grp {
            text-align: center;
        }

        .alert_addNewZone .alert_addNewZone_content .alert_addNewZone_form form div:nth-of-type(1) input {
            margin-right: 28px;
        }

        .alert_addNewZone .alert_addNewZone_content .alert_addNewZone_form form div button:hover {
            background: #5bc0de
        }

        /*区省市样式*/
        .alert_zoneTree_tree {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgb(255, 255, 255, 0.7);
        }

        .alert_zoneTree_tree .alert_zoneTree_content_tree {
            background: #f4f4f5;
            position: fixed;
            top: 50%;
            left: 50%;
            width: 700px;
            height: 450px;
            margin: -220px 0 0 -350px;
            padding: 5px;
            border: 4px solid #ccc
        }

        /* .alert_zoneTree_tree .alert_zoneTree_content_tree h3{font-weight: normal;text-align:left;line-height: 24px;font-size: 20px;padding-left: 1%;width: 99%;margin-bottom:10px;background: #d0e0e0}*/
        .alert_zoneTree_tree .alert_zoneTree_content_tree #zoneTree {
            height: 350px;
            overflow-y: scroll;
        }

        .alert_zoneTree_tree .alert_zoneTree_content_tree #zoneTree #treeDemo2 {
            height: 300px
        }
    </style>
    <!-- 全局js -->
    <script src="__STATIC__/layout/js/jquery.min.js?v=2.1.4"></script>
    <script src="__STATIC__/layout/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script> -->
    <script src="__STATIC__/layout/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <!-- <script src="js/plugins/layer/layer.min.js"></script> -->

    <!-- 自定义js -->
    <!-- <script src="js/hplus.js?v=4.1.0"></script> -->
    <script type="text/javascript" src="__STATIC__/layout/js/contabs.js"></script>
    <!-- Peity -->
    <script src="__STATIC__/layout/js/plugins/peity/jquery.peity.min.js"></script>

    <!-- jqGrid -->
    <script src="__STATIC__/layout/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
    <script src="__STATIC__/layout/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>

    <!-- 自定义js -->
    <script src="__STATIC__/layout/js/content.js?v=1.0.0"></script>
    <script src="__STATIC__/layout/js/plugins/sweetalert/sweetalert.min.js"></script>

    <!-- ztree -->
    <script type="text/javascript" src="__STATIC__/layout/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="__STATIC__/layout/js/jquery.ztree.excheck.js"></script>
</head>

<body class="gray-bg" style="color:#333;padding:3px;">

<div class="row wrapper border-bottom white-bg " style="padding:0 12px;">
    <div class="col-md-12 border_S" style="background: #d0e0e0;line-height: 40px;text-align: center;font-size:16px">
        分区管理
    </div>
    <div class="col-md-12 border_S" style="line-height: 40px;font-size:14px">
        <button class="btn addNewZone">添加新的分区</button>
        <button class="btn addNewPrince">添加新的省份</button>
        <button class="btn LeadZone"><a href="__STATIC__/layout/lendZone.html" style="text-decoration: none;" id="lendZoneTz">导入分区</a>
        </button>
        <button class="btn ZoneTree">分区树</button>
        <button class="btn LeadNewZones">导入批量更新分区</button>
        <button class="btn exportZonesNewT">导出分区批量更新表</button>
    </div>
    <div class="row white-bg border_S" style="min-height: 40px;font-size:12px">
        <div class="col-md-4">
            <label for="">分区名称：</label>
            <input type="text">
        </div>
        <div class="col-md-4">
            <label for="">分区负责人：</label>
            <input type="text">
        </div>
        <div class="col-md-4">
            <label for="">分区管理人员:</label>
            <input type="text">
        </div>
    </div>
    <div class="col-md-12 border_S" style="line-height: 40px;font-size:14px;position:relative;">
        <button class="btn btn-info" style="margin-left: 30%">查询</button>
        <button class="btn btn-info emptyIf">清空查询条件</button>
        <button class="btn btn-info">导出Excel</button>
        <button class="btn btn-info" style="float: right;">回收站</button>
    </div>
</div>

        <table class="table table-striped table-bordered table-hover " id="editable">
            <thead>
            <tr>
                <th>No</th>
                <th>分区名称</th>
                <th>分区负责人</th>
                <th>分区管理人员</th>
                <th>对应省份</th>
                <th>维护</th>
            </tr>
            </thead>
            <tbody>
                {volist name="data" id="row"}
                <tr class="gradeX">
                    <td>{$row.title}</td>
                    <td><span class="line">{$row.provice}</span></td>
                    <td>{$row.cusername}</td>
                    <td class="text-navy">{$row.ctime}</td>
                    <td class="text-navy">{$row.pusername}</td>
                    <td class="center">
                        <a href="javascript:;" data-id="{$row.id}"  class="xiugai amendZone">修改</a>&nbsp;&nbsp;
                        <!--<a href="javascript:;" data-id="{$row.id}" class="shanchu">删除</a>-->
                    </td>
                </tr>
                {/volist}
            </tbody>

        </table>
        {$page}

<div class="alert_addNewZone" id="alert_addNewZone">
    <div class="alert_addNewZone_content">
        <h3><span>添加分区</span><a style="float: right;margin-right: 10px;font-size: 16px" class="del_this">&times;</a>
        </h3>
        <div class="alert_addNewZone_form">
            <form role="form" id="formadd" method="post" action="{:url('add')}">
                <div class="inputDiv">
                    <label for="">分区名称<span style="color: red">*</span>:</label>
                    <input type="text">
                </div>
                <div class="inputDiv">
                    <label for="">分区负责人<span style="color: red">*</span>:</label>
                    <span class="">
                        <input type="text">
                        <a href="javascript:;" class="fenqu_fzr">选择</a>
                        </span>
                </div>
                <div class="inputDiv lastChild">
                    <label for="">分区管理人员:</label>
                    <span class="">
                        <input type="text">
                        <a href="javascript:;" class="fenqu_manager">选择</a>
                        </span>
                </div>
                <div class="btn_grp">
                    <button class="btn">提交</button>
                    <button class="btn fanhui1"  href="javascript:;" >返回</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(function () {
        $('body').on('click','.fanhui1',function () {
            $('.alert_addNewZone').hide()
            return false
        })

    })
</script>
<div class="alert_addNewZone" id="alert_addNewZoneAfter">
    <div class="alert_addNewZone_content">
        <h3><span>修改分区</span><a style="float: right;margin-right: 10px;font-size: 16px" class="del_this">&times;</a>
        </h3>
        <div style="width:98%;height: 40px;background: #d0e0e0;margin:0 1%"></div>
        <p style="color: red;text-align: left;text-indent: 6px;font-size: 12px;margin:5px 0">
            注意：修改分区名称请慎重，因为修改分区名称将会导致已使用该分区名称的地方自动变成修改后的分区名称</p>
        <div class="alert_addNewZone_form">
            <form>
                <div class="inputDiv">
                    <label for="">分区名称<span style="color: red">*</span>:</label>
                    <input type="text">
                </div>
                <div class="inputDiv">
                    <label for="">分区负责人<span style="color: red">*</span>:</label>
                    <span class="" style="">
                          <a href="javascript:;"
                             style="text-decoration: none;color: #333;border-radius: 4px;background:#d0e8f8;margin-right: 5px;border:1px solid #ccc;box-shadow: 0 0 1px #ccc;padding: 2px">何跃<span
                                  class="delA">&times;</span></a>
                        </span>
                </div>
                <div class="inputDiv lastChild">
                    <label for="">分区管理人员:</label>
                    <span class="" style="">
                        <input type="text" placeholder="请输入关键字或空格查询">
                        <a href="javascript:;" class="Prince_manager">选择</a>
                </div>
                <div style="margin-bottom:20px">
                    <label for="" style="visibility: hidden;">分区管理人员:</label>
                    <span class="" style="">
                        <a href="javascript:;"
                           style="text-decoration: none;color: #333;border-radius: 4px;background:#d0e8f8;margin-right: 5px;border:1px solid #ccc;box-shadow: 0 0 1px #ccc;padding: 2px">李勇<span
                                class="delA">&times;</span></a>
                        </span>

                </div>
                <div class="btn_grp">
                    <button class="btn">提交</button>
                    <button class="btn fanhui1">返回</button>
                </div>
            </form>
        </div>
    </div>

</div>

<div class="alert_addNewZone_tree">
    <div class="alert_addNewZone_content_tree">
        <h3><span>员工树</span><a style="float: right;margin-right: 10px;font-size: 16px" class="del_this">&times;</a></h3>
        <div class="alert_addNewZone_form_tree" id="fenqu_fzr">
            <ul id="treeDemo" class="ztree"></ul>
            <div class="quedingbtn" style="margin:0 auto;">
                <button>确定</button>
            </div>
        </div>
        <div class="alert_addNewZone_form_tree" id="fenqu_manager">
            <ul id="treeDemo1" class="ztree"></ul>
            <div class="quedingbtn" style="margin:0 auto;">
                <button>确定</button>
                <button>全选</button>
                <button>取消全选</button>
            </div>
        </div>
    </div>
</div>

<div class="alert_zoneTree_tree">
    <div class="alert_zoneTree_content_tree">
        <h3><span>区省市</span><a style="float: right;margin-right: 10px;font-size: 16px" class="del_this">&times;</a></h3>
        <div class="alert_addNewZone_form_tree" id="zoneTree">
            <ul id="treeDemo2" class="ztree"></ul>
            <div class="quedingbtn" style="margin:0 auto;">
                <button>确定</button>
            </div>
        </div>
    </div>
</div>

<div class="alert_addNewZone " id="alert_addNewPrince">
    <div class="alert_addNewZone_content alert_addNewPrince">
        <h3><span>添加省份</span><a style="float: right;margin-right: 10px;font-size: 16px" class="del_this">&times;</a>
        </h3>
        <div class="alert_addNewZone_form">
            <form>
                <div class="inputDiv">
                    <label for="">省份名称<span style="color: red">*</span>:</label>
                    <input type="text">
                </div>
                <div class="inputDiv">
                    <label for="">省份负责人<span style="color: red">*</span>:</label>
                    <span class="">
                        <input type="text" placeholder="请输入关键字或空格查询">
                        <a href="javascript:;" class="Prince_fzr">选择</a>
                        </span>
                </div>
                <div class="inputDiv">
                    <label for="">所属分区<span style="color: red">*</span>:</label>
                    <span class="" style="margin-right: 37px">
                        <select name="" id="">
                            <option value="请选择">请选择</option>
                        </select>
                        </span>
                </div>
                <div class="inputDiv">
                    <label for="">省份管理人员:</label>
                    <span class="">
                        <input type="text">
                        <a href="javascript:;" class="Prince_manager">选择</a>
                        </span>
                </div>
                <div class="btn_grp">
                    <button class="btn">提交</button>
                    <button class="btn" onclick="goback()">返回</button>
                </div>
            </form>
        </div>
    </div>

</div>

<!-- <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script> -->
<!--统计代码，可删除-->
<script>
    $(document).ready(function () {

        /*添加分区*/
        $(".addNewZone").click(function () {
            $("#alert_addNewZone").show();
        });
        // closeAlert(del_this);
        /*分区负责人选择*/
        $(".fenqu_fzr").click(function () {
            $(".alert_addNewZone_tree").show();
            $("#fenqu_fzr").show();
            $("#fenqu_manager").hide();
        });
        //   /*关闭分区负责人弹出框*/
        // closeAlert(del_this1);
        /*关闭分区管理人员弹出框*/
        $(".fenqu_manager").click(function () {
            $(".alert_addNewZone_tree").show();
            $("#fenqu_fzr").hide();
            $("#fenqu_manager").show();
        })

        /*添加省份*/
        $(".addNewPrince").click(function () {
            $("#alert_addNewPrince").show();
        })
        /*省份负责人*/
        $(".Prince_fzr").click(function () {
            $(".alert_addNewZone_tree").show();
            $("#fenqu_fzr").show();
            $("#fenqu_manager").hide();
        })
        // closeAlert(del_this3)
        /*省份管理人员*/
        $(".Prince_manager").click(function () {
            $(".alert_addNewZone_tree").show();
            $("#fenqu_fzr").hide();
            $("#fenqu_manager").show();
        });
        /*删除已选的*/
        $(".delA").click(function () {
            $(this).parent().remove();
        })
        /*清除查询条件*/
        $(".emptyIf").click(function () {
            $(this).parent().prev().find("input").val("");

        })
        /*子向父窗口传参*/

        /*关闭弹出框方法*/
        var del_this = $(".del_this");
        console.log(del_this.length)
        for (var i = 0, len = del_this.length; i < len; i++) {
            del_this[i].onclick = function () {
                $(this).parent().parent().parent().hide()
            }
        }
        var $table = $("table");
        $table.on("click", ".amendZone", function () {
            $("#alert_addNewZoneAfter").show();
        })
    })
    // var lendZoneTz =$("#lendZoneTz");
    $("#lendZoneTz").on("click", gofu)

    function gofu() {
        var str = '<a href="javascript:;" class="J_menuTab" data-id="' + $("#lendZoneTz").attr("href") + '">' + $("#lendZoneTz").text() + ' <i class="fa fa-times-circle"></i></a>';
        $(window.parent.$(" .J_menuTabs .page-tabs-content").append(str));
        console.log(1)
    }
</script>
<script type="text/javascript">
    var setting = {
        check: {
            enable: true,
            chkStyle: "radio",
            radioType: "level"
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };
    var setting1 = {
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };
    var zNodes = [
        {id: 1, pId: 0, name: "随意勾选 1"},
        {id: 11, pId: 1, name: "随意勾选 1-1"},
        {id: 111, pId: 11, name: "随意勾选 1-1-1"},
        {id: 112, pId: 11, name: "随意勾选 1-1-2"},
        {id: 12, pId: 1, name: "随意勾选 1-2"},
        {id: 121, pId: 12, name: "随意勾选 1-2-1"},
        {id: 122, pId: 12, name: "随意勾选 1-2-2"},
        {id: 2, pId: 0, name: "随意勾选 2"},
        {id: 21, pId: 2, name: "随意勾选 2-1"},
        {id: 22, pId: 2, name: "随意勾选 2-2"},
        {id: 221, pId: 22, name: "随意勾选 2-2-1"},
        {id: 222, pId: 22, name: "随意勾选 2-2-2"},
        {id: 23, pId: 2, name: "随意勾选 2-3"},
        {id: 3, pId: 0, name: "系统管理员"}
    ];

    var code;

    function setCheck() {
        var type = $("#level").attr("checked") ? "level" : "all";
        setting.check.radioType = type;
        showCode('setting.check.radioType = "' + type + '";');
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        $.fn.zTree.init($("#treeDemo1"), setting1, zNodes);
    }

    function showCode(str) {
        if (!code) code = $("#code");
        code.empty();
        code.append("<li>" + str + "</li>");
    }

    $(document).ready(function () {
        setCheck();
        $("#level").bind("change", setCheck);
        $("#all").bind("change", setCheck);
    });
</script>
<script>
    var setting2 = {};

    var zNodes2 = [
        {
            name: "父节点1 - 展开", open: true,
            children: [
                {
                    name: "父节点11 - 折叠",
                    children: [
                        {name: "叶子节点111"},
                        {name: "叶子节点112"},
                        {name: "叶子节点113"},
                        {name: "叶子节点114"}
                    ]
                },
                {
                    name: "父节点12 - 折叠",
                    children: [
                        {name: "叶子节点121"},
                        {name: "叶子节点122"},
                        {name: "叶子节点123"},
                        {name: "叶子节点124"}
                    ]
                },
                {name: "父节点13 - 没有子节点", isParent: true}
            ]
        },
        {
            name: "父节点2 - 折叠",
            children: [
                {
                    name: "父节点21 - 展开", open: true,
                    children: [
                        {name: "叶子节点211"},
                        {name: "叶子节点212"},
                        {name: "叶子节点213"},
                        {name: "叶子节点214"}
                    ]
                },
                {
                    name: "父节点22 - 折叠",
                    children: [
                        {name: "叶子节点221"},
                        {name: "叶子节点222"},
                        {name: "叶子节点223"},
                        {name: "叶子节点224"}
                    ]
                },
                {
                    name: "父节点23 - 折叠",
                    children: [
                        {name: "叶子节点231"},
                        {name: "叶子节点232"},
                        {name: "叶子节点233"},
                        {name: "叶子节点234"}
                    ]
                }
            ]
        },
        {name: "父节点3 - 没有子节点", isParent: true}

    ];

    $(document).ready(function () {
        $(".ZoneTree").click(function () {
            $(".alert_zoneTree_tree").show()
        })
        $.fn.zTree.init($("#treeDemo2"), setting2, zNodes2);
    });
</script>
<script>

</script>
</body>

</html>
